<template>
  <div>
    <template>
      <div class="user-profile">
        <el-row>
          <el-col :span="6" class="avatar-column">
            <div class="avatar"><el-avatar :size="150" :src="circleUrl" style="margin: 50px"></el-avatar></div>
          </el-col>
          <el-col :span="17" class="info-column">
            <div class="info-item">
              <div class="values">{{ username }}</div>
            </div>
            <div class="info-item">
              <div class="label">粉丝：</div>
              <div class="value">{{ fansCount }}</div>
            </div>
            <div class="info-item">
              <div class="label">关注：</div>
              <div class="value">{{ followCount }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>

    <template>
      <div class="navbar">
        <div class="navbar-inner">
          <el-menu mode="horizontal" :default-active="activeItem" @select="handleSelect" class="menu">
            <el-menu-item index="articles" @click="showMySelfArticles">文章</el-menu-item>
            <el-menu-item index="likes" @click="showMyLikeArticles">点赞</el-menu-item>
            <el-menu-item index="favorites" @click="showMyCollectArticles">收藏</el-menu-item>
          </el-menu>
        </div>
      </div>
    </template>

<!-- 列表开始 -->


      <template>
        <div class="infinite-list-demo">
          <ul class="infinite-list" v-infinite-scroll="load">

            <el-card v-for="(i,index) in card" :key="index" class="infinite-list-item" style="background-color: rgba(223,231,215,0.85);padding: 0;">
              <a style="color: #333;text-decoration: none"
                 :href="'/frontEnd/articleDetail?id='+i.id">


                <img :src="i.imagesUrl" style="width: 290px;height: 260px;display: inline-block;">

                <div style="height: 80px; margin: 0;border: 0px">
                  <p>{{i.title}}</p>
                  <el-row style="margin-bottom: 10px">
                    <el-col :span="4">
                      <el-avatar size="lager" :src="i.iconUrl"></el-avatar>
                    </el-col>
                    <el-col :span="20" style="margin-bottom: 10px">
                      <p style="display: inline-block;font-size: 22px;vertical-align: middle;margin-top: 5px">{{i.username}}</p>
                    </el-col>
                  </el-row>
                </div>

                <div style="position: relative; bottom: 15px; ">
                  <img src="http://localhost:8008/imgs/liked.jpg" height="35px" width="35px" style="vertical-align: middle;">
                  <span style="margin-left: 5px; display: inline-block; vertical-align: middle; font-size: 27px;">{{i.liked}}</span>
                  <img src="http://localhost:8008/imgs/collect.jpg" height="50px" width="50px" style="vertical-align: middle;">
                  <span style="margin-left: 1px; display: inline-block; vertical-align: middle; font-size: 27px;">{{i.collect}}</span>
                  <img src="http://localhost:8008/imgs/comment.jpg" height="30px" width="30px" style="vertical-align: middle;margin-left:10px">
                  <span style="margin-left: 5px; display: inline-block; vertical-align: middle; font-size: 27px;">{{i.comments}}</span>
                </div>


              </a>
            </el-card>

          </ul>
        </div>
      </template>

  </div>
</template>

<script>
export default {
  data() {
    return {
      circleUrl: '',
      username: '示例用户名',
      fansCount: '',
      followCount: '',
      activeItem: 'articles', // 默认选中的菜单项

      card:[],


    }
  },
  methods: {
    showMyCollectArticles() {
      this.axios.get("http://localhost:9090/v1/blogs/"+ localStorage.getItem("currentUserId") + "/collectblogs").then( (response)=> {
        if (response.data.code==200){
          this.card=response.data.data;
        }
      })
    },
    showMyLikeArticles() {
      this.axios.get("http://localhost:9090/v1/blogs/"+ localStorage.getItem("currentUserId") + "/likeblogsall").then( (response)=> {
        if (response.data.code==200){
          this.card=response.data.data;
        }
      })
    },
    showMySelfArticles() {
      this.axios.get("http://localhost:9090/v1/blogs/"+ localStorage.getItem("currentUserId") + "/selectselfblogs").then( (response)=> {
        if (response.data.code==200){
          this.card=response.data.data;
        }
      })
    },
    getFansCount() {
      console.log(localStorage.getItem("currentUserId"))
      let url = 'http://localhost:9090/v1/userdetail/' + localStorage.getItem("currentUserId") + '/fans';
      console.log(url);
      this.axios.get(url).then( (response)=> {
        if (response.data.code == 200){
          this.fansCount=response.data.data.fans;
        }
      })
    },
    getFollowCount() {
      let url = 'http://localhost:9090/v1/userdetail/' + localStorage.getItem("currentUserId") + '/follows';
      console.log(url);
      this.axios.get(url).then((response) =>{
        if (response.data.code == 200) {
          console.log(response.data);
          this.followCount = response.data.data.follow;
        }
      });
    },
    handleSelect(index) {
      this.activeItem = index; // 处理选中菜单项的变化
    },
    loadCurrentUserInfo() {
      this.username = localStorage.getItem("currentUserName");
      console.log(this.username)
      this.circleUrl = localStorage.getItem("currentUserIcon");
    }
  },
  mounted() {
    this.showMySelfArticles();
    this.loadCurrentUserInfo();
    this.getFansCount();
    this.getFollowCount();
  }
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
}

.avatar-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.info-column {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}

.info-item {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.label {
  font-family: "Hiragino Sans GB", Arial, sans-serif;
  font-weight: bold;
  padding-right: 10px;
  font-size: 13px;
}

.value {
  font-family: "Hiragino Sans GB", Arial, sans-serif;
  font-weight: bold;
  font-size: 13px;
}

.values {
  font-family: "Hiragino Sans GB", Arial, sans-serif;
  font-weight: bold;
  font-size: 30px; /* 将字体大小设置为主标题大小，可根据需要调整具体数值 */
  line-height:1.7
}

.navbar {
  background-color: white; /* 导航栏背景色为白色 */
}

.menu {
  display: flex;
  justify-content: center; /* 让菜单项在水平方向上居中对齐 */
}

.navbar .el-menu-item.is-active {
  color: #3A71A8; /* 选中后字体颜色为蓝色 */
  background-color: white !important;
  font-weight: bold; /* 选中后菜单项字体加粗 */
}


.infinite-list {
  flex-wrap: wrap; /* 让数据项自适应换行 */
  justify-content: flex-start;
  align-items: center;
  height: 800px;
  width: 1450px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 商品分成4列 */
  gap: 32px; /* 列与列之间空隙为15像素 */
}


.infinite-list-item {
  background-color: #c3c8c8;
  height: 430px;
  width: 100%; /* 设置为百分比 */

}

ul {
  list-style: none;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}


.infinite-list-demo {
  overflow-y: hidden;
}
</style>
